<template>
  <a-affix :offset-top="40" style="position: absolute; right: 20px; z-index: 99">
    <a-button @click="close" danger>关闭</a-button>
  </a-affix>
  <div style="overflow: scroll; height: 660px; width: 900px;">
    <a-timeline style="margin-top: 20px; margin-left: 40px">
      <a-timeline-item v-for="task in timeline" >
        <a-card :title="task.title" style="width: 800px">
          <TaskInfoRow v-for="item in task.info" :item="item"/>
        </a-card>
      </a-timeline-item>
      <template #pendingDot>
        <DownOutlined />
      </template>
      <template #pending>
        <a-typography-title :level="5">{{getDate()}}</a-typography-title>
      </template>
    </a-timeline>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import TaskInfoRow from './TaskInfoRow.vue';
import { DownOutlined } from '@ant-design/icons-vue';

export default {
  components: {
    TaskInfoRow,
    DownOutlined
  },
  computed: mapState({
    timeline: state => state.timeline.timelineTask
  }),
  methods: {
    close() {
      this.$router.push('/');
    },
    getDate() {
      const date = new Date();
      const week = ["日", "一","二", "三", "四", "五", "六"];
      return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日 星期${week[date.getDay()]}`;
    },

  },
  mounted() {
    this.$store.dispatch('timeline/getTimelineTask');
  }
}
</script>

<style scoped>

</style>